<template>
    <div>
        <section class="content-header">
            <div class="title">
                <span>事件工单</span>
                <i class="fa fa-angle-right fa-1x" aria-hidden="true"></i>
                <span> 工单详情</span>
            </div>
        </section>
        <section class="content clearfix">
            <div class="row c-top">
                <div class="col-md-1">
                    <img :src="form.orderPhotopath && form.orderPhotopath.split(',')[0]" alt="未添加图片">
                </div>
                <div class="col-md-11">
                    <p>事件名称：{{form.orderName}}
                        <span class="state">{{state[form.orderStatus]}}</span>
                    </p>
                    <p>编号：{{form.orderId}}<router-link :to="{path:'list'}"><button type="button" class="btn btn-primary" style="float:right;margin-right:100px;">返回事件工单</button></router-link></p>
                    <p>事件类别：{{form.orderType}}</p>
                </div>
            </div>
            <div class="col-md-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#activity" data-toggle="tab">事件信息</a>
                        </li>
                        <li ref="nav-tabs1">
                            <a href="#timeline" data-toggle="tab">处理信息</a>
                        </li>
                        <li ref="nav-tabs2">
                            <a href="#settings" data-toggle="tab">事件办理</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="active tab-pane" id="activity">
                            <basicmsg :formList="form" ref="basicmsgComp"/>
                        </div>
                        <div class="tab-pane" id="timeline">
                            <!-- <detailmsg ref="detailmsg"/> -->
                            <detailmsg @isActive="go" ref="detailmsgComp" :formList="form"/>
                        </div>
                        <div class="tab-pane" id="settings">
                            <paifaDeal @isActive="back" :formList="form" v-if="form.orderStatus == 0" :distributeList="getDistributeList"/>
                            <lingliaoDeal @isActive="back" :formList="form" v-if="form.orderStatus == 1" />
                            <chuliDeal @isActive="back" :formList="form" v-if="form.orderStatus == 2" />
                            <shenheDeal @isActive="back" :formList="form" v-if="form.orderStatus == 3" />
                            <huifangDeal @isActive="back" :formList="form" v-if="form.orderStatus == 4" />
                            <finishDeal @isActive="back" :formList="form" v-if="form.orderStatus == 5" />

                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import basicmsg from "@/components/ticket/detail/BasicMsg.vue";
import detailmsg from "@/components/ticket/detail/DetailMsg.vue";
import paifaDeal from "@/components/ticket/detail/paifaDeal.vue";
import lingliaoDeal from "@/components/ticket/detail/lingliaoDeal.vue";
import chuliDeal from "@/components/ticket/detail/chuliDeal.vue";
import shenheDeal from "@/components/ticket/detail/shenheDeal.vue";
import huifangDeal from "@/components/ticket/detail/huifangDeal.vue";
import finishDeal from "@/components/ticket/detail/finishDeal.vue";

export default {
    data() {
        // console.log(this.$route.query.orderId);
        return {
            form: {},
            state:['已创建','已派发','已确认','已处理','已审核','已完成'],
            distributeList:[],
            isActive:0
        };
    },
    mounted() {
        this.getSelEventId();
        if(this.$route.query.msg==2){
            $(this.$refs['nav-tabs2']).find('a').trigger('click')
        }
    },
    methods: {
        getSelEventId() {
            this.$api.ticket.list
                .selEventId({
                    orderId: this.$route.query.orderId
                })
                .then(res => {
                    if (res.success) {
                        this.form = res.data;
                        console.log(res)
                    }
                });
        },
        getDistributeList(data){
            this.distributeList=data;
            // console.log(this.distributeList)
        },
        back(){
            $(this.$refs['nav-tabs1']).find('a').trigger('click')
        },
        go(){
            $(this.$refs['nav-tabs2']).find('a').trigger('click')
        }
    },
    components: {
        basicmsg,
        detailmsg,
        paifaDeal,
        lingliaoDeal,
        chuliDeal,
        shenheDeal,
        huifangDeal,
        finishDeal
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content-header {
    padding: 0 15px;
    .title {
        font-weight: bolder;
    }
    span,
    i {
        line-height: 40px;
    }
}
.content {
    padding: 0;
    .c-top {
        padding: 15px;
        img {
            width: 90px;
            height: 90px;
        }
        p {
            margin: 0;
            line-height: 30px;
        }
        .state {
            display: inline-block;
            padding: 0 10px;
            height: 18px;
            background: #9ccc65;
            border-radius: 18px;
            margin-left: 50px;
            line-height: 18px;
            text-align: center;
            color: white;
        }
    }
}
</style>
